const boxs = document.querySelectorAll('.box')
window.addEventListener('scroll', checkBoxs)

checkBoxs()

function checkBoxs (){
    const innerHeight = window.innerHeight
    boxs.forEach(box => {
        const top = box.getBoundingClientRect().top
        if( top > innerHeight - 100 || top < -50){
            box.classList.remove('show')
        }else{
            box.classList.add('show')
        }
    })
}